<template>
  <div>
   <Header></Header>
        <div class="block">
          <el-timeline>
            <el-timeline-item :timestamp="order.createdTime" placement="top" v-for="order in orders">
              <el-card>
                <h4>
                    {{ order.productDetatils }}
                  支付状态: <span v-if="order.isComplete === 1">已完成</span>
                  <span v-if="order.isComplete === 0">待支付</span>
                  <span v-if="order.isComplete === -1">已取消</span>
                  </h4>
                <p>支付金额:￥  {{order.totalMoney}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
    <el-pagination class="mpage"
                   background
                   layout="prev, pager, next"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   :total="total"
                   @current-change=getMyOrder>
    </el-pagination>
    </div>

</template>

<script>
import Header from "../components/Header";
export default {
  name: "MyOrder.vue",
  components: {Header},
  data() {
    return {
      user:this.$store.getters.getUser,
      currentPage: 1,
      total: 0,
      pageSize: 5,
      orders: {},
    };
  },
  methods:{
    getMyOrder(currentPage){
      const _this = this
      _this.$axios.get("/order/getMyOrder?currentPage="+currentPage+"&userId="+this.user.id).then(res => {
        _this.orders = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
      })
    },
  },
  created() {
    const userId=this.user.id
    //异步请求查询
    if(userId){
      this.getMyOrder(this.currentPage);
    }
  }
};
</script>
<style>
.mpage {
  margin: 0 auto;
  text-align: center;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>